<div class="z-circulate-show" style="width:650px;height:433px;overflow: hidden;">
    <div class="z-image-container" style="width:650px;height:433px;overflow: hidden;">
	<img src="/assets/img/z-ajax-loading.gif" alt="z-circulate-show" class="z-image" onload="window.alignImage(this,650,433);"/>
    </div>
    <?php if (isset($photos) && isset($photos[0])): ?>
        <ul class="z-button">
	    <?php foreach ($photos as $index => $photo): ?>
		<li>
		    <a href="/assets/uploads/<?php echo $photo->file_name; ?>">
			<?php echo $index + 1; ?>
		    </a>
		</li>
	    <?php endforeach; ?>
        </ul>
    <?php endif; ?>
</div>
<script type="text/javascript">
    $(function(){
	new Z.CirculateShow($('.z-circulate-show'),650,433);
    });
</script>
<style type="text/css">
    .z-circulate-show{position: relative;}
    .z-circulate-show .z-large-picture{position: absolute;top:0;left:0;}
    .z-circulate-show .z-large-picture.active{z-index: 5;}
    .z-circulate-show .z-large-picture img{display: block;}
    .z-circulate-show ul{position:absolute;bottom: 0;right: 0;margin: 0;padding:0;z-index: 6;}
    .z-circulate-show ul li{list-style-type: none;float: left;margin-left:1px;}
    .z-circulate-show ul li a{
	display:block;width:20px;height:20px;line-height:20px;text-align:center;background-color: #443D2E;opacity:0.6;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);}
</style>